<template>
  <div class="todo_list">
    <ul class="list-group">
      <li class="list-group-item d-flex justify-content-between align-items-center" v-for="value in list" :key="value.id">
        <div class="form-check">
          <input class="form-check-input"
                 type="checkbox"
                 value=""
                 id="value.id"
                 :checked='value.state'
                 @change='value.state=!value.state'>
          <label class="form-check-label"
                 for="value.id">
           {{value.task}}
          </label>
        </div>
        <span class="badge badge-pill" :class="{'badge-warning':!value.state,'badge-success':value.state}">{{value.state?'完成':'未完成'}}</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {


props:{
  list:{
    type:Array,
    required:true
  }
}
}
</script>

<style lang="less" scoped>
.todo_list {
  width: 400px;
}
</style>